<template>
  <div>
    <el-container>
      <!--      左侧-->
      <el-aside width="210px" class="aside" >
        <!--        图片logo-->
        <el-row style="width: 210px;height: 120px;line-height: 120px;text-align: center;background-color: #fff ">
          <img src="https://slwl-admin.itheima.net/static/img/logo.58dd185e.png" style="width: 152px;height: 113px" />
        </el-row>
        <!--        左侧NavMenu导航菜单-->
        <el-row>
          <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            unique-opened
            @close="handleClose">
            <el-menu-item index="/working">
              <!--工作台-->
              <img src="../../assets/logo/as.png" alt="" style="width: 16px;margin-left: 5px;margin-right: 5px">
              <span slot="title">工作台</span>
            </el-menu-item>
            <el-submenu index="2">
              <template slot="title">
                <img src="../../assets/logo/bs.png" alt="" style="width: 16px;margin-left: 5px;margin-right: 5px">
                <span>基础数据管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index='/institution'>机构管理</el-menu-item>
                <el-menu-item index="/orom">机构作业范围</el-menu-item>
              </el-menu-item-group>
              <el-menu-item index="/freight">运费管理</el-menu-item>
            </el-submenu>
            <el-submenu index="3">
              <template slot="title">
                <img src="../../assets/logo/csa.png" alt="" style="width: 16px;margin-left: 5px;margin-right: 5px">
                <span>车辆管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="1-1">车型管理</el-menu-item>
                <el-menu-item index="1-2">车辆列表</el-menu-item>
              </el-menu-item-group>
              <el-menu-item index="1-3">回车登记</el-menu-item>
            </el-submenu>
            <el-submenu index="4">
              <template slot="title">
                <img src="../../assets/logo/ds.png" alt=""  style="width: 16px;margin-left: 5px;margin-right: 5px">
                <span>员工管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="1-1">快递员管理</el-menu-item>
                <el-menu-item index="1-2">司机管理</el-menu-item>
              </el-menu-item-group>
              <el-menu-item index="1-3">排班管理</el-menu-item>
            </el-submenu>
            <el-submenu index="5">
              <template slot="title">
                <img src="../../assets/logo/es.png" alt=""  style="width: 16px;margin-left: 5px;margin-right: 5px">
                <span>业务管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="1-1">订单管理</el-menu-item>
                <el-menu-item index="1-2">运单管理</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="6">
              <template slot="title">
                <img src="../../assets/logo/fs.png" alt="" style="width: 16px;margin-left: 5px;margin-right: 5px">
                <span>调度管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="1-1">运输任务管理</el-menu-item>
                <el-menu-item index="1-2">线路管理</el-menu-item>
                <el-menu-item index="1-3">取件作业管理</el-menu-item>
                <el-menu-item index="1-4">派件作业管理</el-menu-item>
              </el-menu-item-group>
            </el-submenu>

          </el-menu>
        </el-row>
      </el-aside>
      <el-container>
        <el-header>

          <div class="head">
            <el-col>
              <h3>工作台</h3>
            </el-col>
            <el-col style="width: 190px;height: 30px;line-height: 30px; ">
              <img src="../../assets/logo/gs.png" style="width: 30px">
              <span>神领管理员</span>
              <el-button type="text" size="mini" @click="logout"> <img src="../../assets/logo/hs.png" alt=""></el-button>
            </el-col>
          </div>

        </el-header>
        <!--        主体部分-->
        <el-main>

        </el-main>
        <el-footer>Footer</el-footer>
      </el-container>
    </el-container>

  </div>
</template>
<script>
// import { dayjs } from 'element-plus'
import dayjs from 'dayjs'
export default {
  name: 'lay-out',
  data () {
    return {
      currentTime: dayjs(Date.now()).format('YYYY-MM-DD HH:mm:ss')
    }
  },
  methods: {
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    },
    // 点击退出之后，通知vuex删除token，清理token，跳转路由  还要删除数据
    logout () {
      this.$confirm('确认退出吗？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$store.dispatch('user/logoutAction')
          this.$router.push('/login')
        })
        .catch(() => {})
    }
  }
}
</script>
<style lang="scss" scoped>
.aside{
  height: 800px;
  color: #ffffff;
}
.head{
  display: flex;
  justify-content: space-between;
}
.main{
  background-color: pink;
  //margin-left: 25px;
}
</style>
